@extends('admin.common.base-master')

@section('html-head')
    {{--<link href="{{url('/vendor/tyupload/control/css/zyUpload.css')}}" type="text/css" rel="stylesheet" />--}}
    <link href="{{url('css/jquery.form.css')}}" type="text/css" rel="stylesheet" />
    {{--<script src="{{url('/vendor/My97DatePicker/WdatePicker.js')}}"></script>--}}
    <script src="{{url('/js/lib/jquery.form.js')}}"></script>
    <style>
        .btn_add_classify{
            background: #31bcd3;margin-left:10px;height: 5px;width: 50px;color: white;text-align: center;padding:5px;border-radius:7px;box-shadow: 3px 2px 9px #888888;
        }
    </style>
@endsection

@section('html-body')
    <!-- content start -->
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="{{route('Admin.Home.productList')}}">产品管理</a>
            <em>></em>
            <a href="#">产品设置</a>
        </div>
        <!-- cur-position end -->

        <div class="gg-step">
            <form  id="advform">
                <input type="hidden" name="id" id="bannerid" value="@if($sysProduct){{$sysProduct->id}}@endif"/>
                <div class="gg-list">
                    <label class="tit">产品内容</label>
                    <div class="cont">
                        <textarea name="content" id="contents" cols="69" rows="10" placeholder="请输入产品内容">@if($sysProduct){{$sysProduct->content}}@endif</textarea><cite id="title_re" class="required">*</cite>
                        <p class="text">可输入50-100个字符（一个汉字等于2个字符）</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">素材形式</label>
                    <div class="cont">
                        <label class="gg-radio">
                            <input type="radio" name="charge_type" data-radio="charge_img" value="img" id="charge_img" @if($sysProduct && $sysProduct->video_id == 0 || !$sysProduct)checked @endif />
                            <cite>图片</cite>
                        </label>
                        <label class="gg-radio">
                            <input type="radio" name="charge_type" data-radio="charge_video" value="video" id="charge_video" @if($sysProduct && $sysProduct->video_id != 0)checked @endif />
                            <cite>视频</cite>
                        </label>
                    </div>
                </div>

                <div class="gg-list" id="sucai_img"  @if($sysProduct && $sysProduct->video_id != 0)style="display: none;"@endif>
                    <label class="tit">产品图片</label>
                    <div class="demo" style="display: inline-block; padding: 0; margin: 0; *display: inline; *zoom:1;" >
                        <input type = "hidden" name = "pic_img" id = "pic_img2" value = "" height="70px" >
                        <div class="btn" style="background: #00A2D4;">
                            <span id="inputImages">添加图片</span>
                            <input id="img_ids" type="hidden" name="img_ids" value="@if($sysProduct){{$sysProduct->img_strs}}@endif">
                        </div>

                        <div class="pro_text">
                           上传图片(格式：png,jpg,gif)
                        </div>
                        <p class="text" id="show_img">
                            @if($sysProduct && count($sysProduct->img_urls) > 0)
                                @foreach($sysProduct->img_urls as $imgUrl)
                            <img src="{{$imgUrl}}" style="padding: 5px;width: 100px;" />
                                @endforeach
                                @endif
                        </p>
                    </div>
                </div>

                <div class="gg-list" id="sucai_video" @if(($sysProduct && $sysProduct->video_id == 0) || !$sysProduct)style="display: none;"@endif>
                    <label class="tit">产品视频</label>
                    <div class="demo" style="display: inline-block; padding: 0; margin: 0; *display: inline; *zoom:1;" >
                        <input type = "hidden" name = "pic_img" id = "pic_img2" value = "" height="70px" >
                        <div id="showimg">
                        </div>
                        <div class="btn" style="background: #00A2D4;">
                            <span id="inputVideo">添加视频</span>
                            <input id="video_id" type="hidden" name="thumb_id" value="@if($sysProduct){{$sysProduct->video_id}}@endif">
                        </div>
                        <div class="progress" >
                            <span class="bar"></span><span class="percent">0%</span >
                        </div>
                        <p class="text" id="uploadthumb">上传视频(格式：mp4)</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">分类一</label>
                    <div class="cont">
                        <select name="classify_one" id="classify_one">
                            @if(count($classOne) > 0)
                                @foreach($classOne as $one)
                                    <option value="{{$one->id}}" @if($sysProduct && $sysProduct->classify_one == $one->id)selected @endif>{{$one->name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">分类二</label>
                    <div class="cont">
                        <select name="classify_two" id="classify_two">
                            @if(count($classTwo) > 0)
                                @foreach($classTwo as $two)
                                    <option value="{{$two->id}}" @if($sysProduct && $sysProduct->classify_two == $two->id)selected @endif>{{$two->name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">分类三</label>
                    <div class="cont">
                        <select name="classify_three" id="classify_three">
                            @if(count($classThree) > 0)
                                @foreach($classThree as $three)
                                    <option value="{{$three->id}}" @if($sysProduct && $sysProduct->classify_three == $three->id)selected @endif>{{$three->name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="gg-list" data-id="ggzst2" >
                    <label class="tit">产品状态</label>
                    <div class="demo" style="display: inline-block; padding: 0; margin: 0; *display: inline; *zoom:1;" >
                        <select name="status" id="status">
                            <option value="1" @if($sysProduct && $sysProduct->status == '1')selected @endif>上架</option>
                            <option value="0" @if($sysProduct && $sysProduct->status == '0')selected @endif>下架</option>
                        </select>
                    </div>
                </div>

            </form>
            <div class="gg-list" >
                <label class="tit">&nbsp;</label>
                <div class="cont" >
                    <a href="javascript:;" class="next-step" id="btn-set">提交</a>
                </div>
            </div>
        </div>
    </div>

    <!-- content end -->
    <script>
        $(function() {
            $('[data-radio=charge_img]').on('click',function() {
                $('#sucai_img').show();
                $('#sucai_video').hide();
            });

            $('[data-radio=charge_video]').on('click',function() {
                $('#sucai_img').hide();
                $('#sucai_video').show();
            });

            $(document).on('click', '#btn-set', function () {
                var id = $('#bannerid').val();
                var video_id = $('#video_id').val();
                var img_ids = $('#img_ids').val();
                var content = $('#contents').val();
                var classify_one  = $('#classify_one option:selected').val();
                var classify_two  = $('#classify_two option:selected').val();
                var classify_three = $('#classify_three option:selected').val();
                var status = $('#status option:selected').val();

                $.ajax({
                    url: '{{route("Api.Admin.sys.setProduct")}}',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id :id,
                        content: content,
                        video_id: video_id,
                        img_ids: img_ids,
                        classify_one: classify_one,
                        classify_two: classify_two,
                        classify_three: classify_three,
                        status: status
                    },
                    success: function (obj) {
                        if (obj.level == "success") {
                            noty({
                                text: obj.message, type: obj.level, timeout: 600,
                                callback: {
                                    afterClose:function(){
                                        window.location.href = "{{route('Admin.Home.productList')}}";
                                    }
                                }
                            });
                        } else if (obj.level == "error") {
                            noty({text: obj.message, type: obj.level, timeout: 600});
                        }

                    },
                    error: function (obj) {
                        console.log(obj);
                    }
                });
            });

            //图片上传代码
            var uploaderImgs = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'inputImages',
                url: '{{route("Api.File.upload")}}',

                chunk_size: '20mb',
                filters: {
                    max_file_size: '20mb',
                    mime_types: [
                        {title: "Image files", extensions: "jpg,gif,png"}
                    ],
                    prevent_duplicates: false
                },
                multi_selection: true,
                unique_names: true,

                flash_swf_url: '{{ url('vendor/plupload-2.1.2/Moxie.swf') }}',
                silverlight_xap_url: '{{ url('vendor/plupload-2.1.2/Moxie.xap') }}',

                file_data_name: 'photo',
                headers: {
                    Accept: 'application/json'
                },

                multipart_params: {},

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        up.start();
                    },

                    BeforeUpload: function (up, file) {
                        up.settings.multipart_params.file_name = file.name;
                    },

                    UploadProgress: function (up, file) {
                        $('.pro_text').html('<span style="color:red">上传中...</span>');
                    },

                    Error: function (up, err) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(err.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }

                        noty({
                            type: 'error',
                            text: err.message + ' ' + responseMessage,
                            timeout: 800
                        });
                    },

                    FileUploaded: function (up, file, info) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(info.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }
                        if (responseObj.level == "success") {
                            var imgString = $('#img_ids').val();
                            if(imgString != ""){
                                imgString = imgString + "," + responseObj.data.id;
                            }else {
                                imgString = responseObj.data.id;
                            }

                            $('#img_ids').val(imgString);

                            var imgURL = responseObj.data.img_url + "?" + Math.random();
                            var imgHtml = '<img src="'+imgURL+'" style="padding: 5px;width: 100px;" />';
                            $('#show_img').append(imgHtml);
                            $('.pro_text').html('<span style="color:green">上传成功</span>');
                        } else {
                            noty({type: responseObj.level, text: responseObj.message, timeout: 800});
                            $('.pro_text').html('<span style="color: red">上传失败，请重新上传！</span>');
                        }

                    }
                }
            });
            uploaderImgs.init();

            //视频上传代码
            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'inputVideo',
                url: '{{route("Api.File.uploadVideo")}}',

                chunk_size: '20mb',
                filters: {
                    max_file_size: '20mb',
                    mime_types: [
                        {title: "Image files", extensions: "mp4"}
                    ],
                    prevent_duplicates: false
                },
                multi_selection: true,
                unique_names: true,

                flash_swf_url: '{{ url('vendor/plupload-2.1.2/Moxie.swf') }}',
                silverlight_xap_url: '{{ url('vendor/plupload-2.1.2/Moxie.xap') }}',

                file_data_name: 'video',
                headers: {
                    Accept: 'application/json'
                },

                multipart_params: {},

                init: {
                    PostInit: function () {
                    },

                    FilesAdded: function (up, files) {
                        up.start();
                    },

                    BeforeUpload: function (up, file) {
                        up.settings.multipart_params.file_name = file.name;
                    },

                    UploadProgress: function (up, file) {
                        $('#uploadthumb').html('<span style="color:red">上传中...</span>');
                    },

                    Error: function (up, err) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(err.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }

                        noty({
                            type: 'error',
                            text: err.message + ' ' + responseMessage,
                            timeout: 800
                        });
                    },

                    FileUploaded: function (up, file, info) {
                        var responseObj = '', responseMessage = '';
                        try {
                            responseObj = $.parseJSON(info.response);
                            responseMessage = responseObj.message;
                        } catch ($e) {

                        }
                        if (responseObj.level == "success") {
                            $('#video_id').val(responseObj.data.id);
                            $('#uploadthumb').html('<span style="color:green">上传成功</span>');
                        } else {
                            noty({type: responseObj.level, text: responseObj.message, timeout: 800});
                            $('#uploadthumb').html('<span style="color: red">上传失败，请重新上传！</span>');
                        }

                    }
                }
            });
            uploader.init();
        });
    </script>
@endsection